<template>
    
    <h2>这是收费统计界面</h2>


    <!--小表单-->
    <div class="container">
        <el-row :gutter="20">
            <el-form>

                <el-col :span="24" style="display: flex;justify-content: center;">
                    <el-form-item label="选择:">
                        <div class="flex flex-wrap gap-4 items-center">
                            <el-radio-group v-model="state.radio" class="ml-4" @change="handleChange" style="margin-bottom: 1em;">
                                <el-radio value="1" size="large">月</el-radio>
                                <el-radio value="2" size="large">季</el-radio>
                                <el-radio value="3" size="large">年</el-radio>
                            </el-radio-group>
                        </div>
                    </el-form-item>
                </el-col>

                <el-col :span="24">
                    <el-form-item label="查找年份：" v-show="isShow">
                        <div class="flex flex-wrap gap-4 items-center">
                            <el-select v-model="state.value1" placeholder="选择年份" style="width: 240px">
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                            </el-select>
                        </div>


                    </el-form-item>
                    <el-form-item label="选择年份：" v-show="!isShow">
                        <div class="flex flex-wrap gap-4 items-center">
                            <el-select v-model="state.value2" placeholder="开始年份" style="width: 240px">
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                            </el-select>
                        </div>

                        <div class="flex flex-wrap gap-4 items-center">
                            <el-select v-model="state.value3" placeholder="结束年份" style="width: 240px;margin-left: 30px;">
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                            </el-select>
                        </div>

                    </el-form-item>
                </el-col>
            </el-form>
        </el-row>
    </div>
    <!--小表单##-->


    <!--按钮组件-->
    <div class="mb-4" style="display: flex;justify-content: center;margin-right: 140px;">
        <el-button type="primary">统计</el-button>
        <el-button type="success">取消</el-button>
    </div>
    <!--按钮组件##-->

</template>



<script setup>

import { ref, reactive } from 'vue'

const isShow = ref(true)
const state = reactive({
    radio: '1',
    value1: '',
    value2: '',
    value3:''
})
const handleChange = (val) => {
    if (val == 3) {
        isShow.value = false
    } else {
        isShow.value = true
    }
}
//ceshi1


const options = [
  {
    value: 2018,
    label: '2018',
  },
  {
    value: 2019,
    label: '2019',
  },
  {
    value: 2020,
    label: '2020',
  },
  {
    value: 2021,
    label: '2021',
  },
  {
    value: 2022,
    label: '2022',
  },
]

</script>

<style scoped>
.container{
    display: flex;
    justify-content: center; 
    margin-right: 140px;
}

</style>